<template>
    <div class="video-box">
        <div class="container-flex book">
            <div class="block" v-for="(item,index) in classDetailList" :key="index" @click="goToContent(item)">
                <div class="book-item">
                    <span class="book-cover" style="backgroundImage:url('../../../static/images/base/video_default.png')">
                        <!-- <img :src="chioceImg(item.max_file_name)" alt=""> -->
                    </span>
                    <span class="book-name" v-html="item.columnName">李宇春压轴登场 小小鹿小小鹿</span>
                </div>
            </div>
        </div>
        <!-- <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div> -->
    </div>
</template>

<script> 
import { GetNewVideoTwoList,GetVideoDetailsList } from "@/api/Api";
export default {
  data() {
    return {
      classDetailList:[],
      navIndex:Number(this.$route.query.navIndex)||0,
      pageSize:12,
      currentPage:Number(this.$route.query.currentPage)||1,
      loading:true,
      total:0
    };
  },
  created(){
    // return;
    this.type_name = this.$route.query.value
    console.log(this.type_name)
    // this.currentPage = Number(this.$route.query.currentPage)||1
    GetVideoDetailsList(3,this.type_name)
      .then(result=>{
        // this.total = result.total
        // this.currentPage = Number(this.$route.query.currentPage)||1
        this.classDetailList = result.data;
      })
  },
  components: {},
  methods: {
    goToContent(item) {
      this.$router.push("/videomusic/video_content?value2="+item.columnId+"&value="+this.$route.query.value+"&title="+item.columnName);
    },
    handleSizeChange(val) {
      this.$router.push(this.$route.path+"?value="+this.$route.query.value+'&currentPage='+this.currentPage)
    },
    handleCurrentChange(val) {
      this.$router.push(this.$route.path+"?value="+this.$route.query.value+'&currentPage='+this.currentPage)
    },
    chioceImg(item){
      return 'http://cacv.cnki.net/Content/CACV/FM/'+item.substring(0,8)+'/'+item+'.jpg'
    }
  },
  watch:{
    '$route'(){
      // return;
      this.type_name = this.$route.query.value
      // this.currentPage = Number(this.$route.query.currentPage)||1
      GetVideoDetailsList(3,this.type_name)
        .then(result=>{
          console.log(result,123)
          this.loading = false
          // this.total = result.total
          // this.currentPage = Number(this.$route.query.currentPage)||1
          this.classDetailList = result.data;
        })
    }
  }
};
</script>
<style lang="less" scoped>
.video-box {
  background: #fff;
  padding: 0px 20px 20px 20px;
  margin-top: 20px;
  border-radius: 10px;
  .book {
    flex-wrap: wrap;
    justify-content: flex-start;
    border-bottom: 1px solid #c1c1c1;
    margin-bottom: 20px;
    .block {
      padding-left: 60px;
      width: 184px;
      margin-bottom: -1px;
      border-bottom: 1px solid #c1c1c1;
      margin-top: 24px;
      cursor: pointer;
      .book-cover {
        background: url("/static/images/base/video-box.png") no-repeat;
        background-size: cover;
        width: 184px;
        height: 106px;
        display: block;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        img {
          position: absolute;
          right: 20px;
          bottom: 10px;
          width: 100%;
        }
      }
      .book-name {
        margin-top: 8px;
        margin-bottom: 24px;
        display: block;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
    }
    .block:nth-child(5n + 1) {
      padding-left: 0px;
    }
  }
}
</style>


